/**
 * 订单列表页面组件
 * 展示用户的所有订单，包括订单状态、商品信息、金额等
 */
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useAppContext } from '../../store'
import { formatDateTime } from '../../utils'
import './index.scss'

/**
 * 订单列表页面组件
 * 提供订单列表展示、状态显示、跳转详情等功能
 */
export default function Orders() {
  const { state } = useAppContext()

  /**
   * 处理订单点击事件
   * @param orderId 订单ID
   */
  const handleOrderClick = (orderId: string) => {
    Taro.navigateTo({
      url: `/pages/orders/detail?id=${orderId}`
    })
  }

  /**
   * 获取订单状态的中文显示文本
   * @param status 订单状态
   * @returns string 状态中文文本
   */
  const getStatusText = (status: string) => {
    const statusMap = {
      pending: '待确认',
      confirmed: '已确认',
      completed: '已完成',
      cancelled: '已取消'
    }
    return statusMap[status] || status
  }

  /**
   * 获取订单状态对应的颜色
   * @param status 订单状态
   * @returns string 颜色值
   */
  const getStatusColor = (status: string) => {
    const colorMap = {
      pending: '#ff9500',
      confirmed: '#007aff',
      completed: '#34c759',
      cancelled: '#ff3b30'
    }
    return colorMap[status] || '#999'
  }

  /**
   * 获取订单ID的短格式（微信小程序兼容）
   * @param orderId 完整订单ID
   * @returns string 短格式订单ID
   */
  const getShortOrderId = (orderId: string) => {
    if (orderId.length <= 8) return orderId
    return orderId.substring(orderId.length - 8)
  }

  return (
    <View className='orders'>
      {/* 页面标题 */}
      <View className='header'>
        <Text className='title'>我的订单</Text>
      </View>
      
      {/* 订单列表 */}
      <ScrollView className='order-list' scrollY>
        {state.orders.length === 0 ? (
          // 空状态 - 当没有订单时显示
          <View className='empty-state'>
            <Text className='empty-text'>暂无订单</Text>
          </View>
        ) : (
          // 订单列表 - 遍历显示所有订单
          state.orders.map(order => (
            <View 
              key={order.id} 
              className='order-item'
              onClick={() => handleOrderClick(order.id)}
            >
              {/* 订单头部信息 */}
              <View className='order-header'>
                <Text className='order-id'>订单 #{getShortOrderId(order.id)}</Text>
                <Text 
                  className='order-status'
                  style={{ color: getStatusColor(order.status) }}
                >
                  {getStatusText(order.status)}
                </Text>
              </View>
              
              {/* 订单内容信息 */}
              <View className='order-content'>
                {/* 订单商品列表 */}
                <View className='order-items'>
                  {order.items.map((item, index) => (
                    <Text key={index} className='item-text'>
                      {item.dishName} x{item.quantity}
                    </Text>
                  ))}
                </View>
                
                {/* 订单底部信息 */}
                <View className='order-footer'>
                  <Text className='order-time'>
                    {formatDateTime(order.createdAt)}
                  </Text>
                  <Text className='order-amount'>
                    ¥{order.finalAmount.toFixed(2)}
                  </Text>
                </View>
              </View>
            </View>
          ))
        )}
      </ScrollView>
    </View>
  )
} 